import {Component} from "react";
import React from "react";
import SwiperBar from '../components/swiperBar'
import Untils from '../untils/untils'
import API from '../untils/api'
import {Tabs, WhiteSpace} from 'antd-mobile';//https://mobile.ant.design/components/tabs-cn/
import {NavLink} from "react-router-dom";
import Bscroll from 'better-scroll';
import {connect} from 'react-redux';
import UserIpt from '../components/userIpt'

class News extends Component {
    constructor(props) {
        super(props);
        // console.log(this.props,'22');
        this.state = {
            list: [
                {text: 13122238792, id: 1},
                {text: 'colin2', id: 2},
                {text: 13122238792, id: 3}
            ],
            tabs: [
                {title: '待支付'},
                {title: '已支付'},

            ],
            arr: [],
            request: {
                gold: 0,
                currentPage: 1
            },
            firstComing: true,
            txtStyle: null
        };
        this.remove = this.remove.bind(this);
        this.tabClick = this.tabClick.bind(this);
    }

    render() {
        return (
            <div>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div key={item.id}>
                                <SwiperBar text={item.text} key={item.id} remove={this.remove.bind(index)}
                                           index={index} ifSlider={true} txtStyle={this.state.txtStyle}

                                />
                            </div>
                        )
                    })
                }
                <UserIpt/>
                <div>
                    <WhiteSpace/>
                    <Tabs tabs={this.state.tabs} initialPage={0} animated={true} useOnPan={false}
                          onChange={this.tabClick} swipeable={true}>

                        <div style={{alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff'}}>
                            <div className='banner-news banner-news1' ref='bannerNews1'>
                                <div>
                                    {
                                        this.state.arr.map((item, index) => {
                                            return (
                                                <div key={item.id}>
                                                    <NavLink to={{pathname: '/article', search: 'id=' + item.id}}>
                                                        <h2>{index + 1}.{item.goldTitle}</h2>
                                                        <p>{item.label}</p>
                                                    </NavLink>
                                                </div>
                                            )
                                        })
                                    }
                                </div>

                            </div>

                        </div>
                        <div style={{alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff'}}>
                            <div className='banner-news banner-news2' ref='bannerNews2'>
                                <div>
                                    {
                                        this.state.arr.map((item, index) => {
                                            return (
                                                <div key={item.id}>
                                                    <NavLink to={{pathname: '/article', search: 'id=' + item.id}}>
                                                        <h2>{index + 1}.{item.goldTitle}</h2>
                                                        <p>{item.label}</p>
                                                    </NavLink>
                                                </div>
                                            )
                                        })
                                    }
                                </div>

                            </div>

                        </div>
                    </Tabs>
                    <WhiteSpace/>
                </div>
            </div>
        )
    }

    remove(index) {
        let newArr = this.state.list;
        let _this = this;
        Untils.Alert({
            content: '确定删除？',
            callback(n) {
                if (n == 1) {
                    newArr.splice(index, 1);
                    _this.setState({
                        list: newArr
                    })
                } else {
                    _this.setState({
                        txtStyle: {transform: 'translateX(0rem)'}
                    })
                }
            }
        })


    }

    alert() {
        alert(0)
    }

    componentDidMount() {
        this.getData(0);

    }

    tabClick(tab, index) {
        if (index != 0 && !index) {
            return
        } else if (index == 0) {
            this.setState({
                request: {
                    gold: 0,
                    currentPage: 1,
                },
                arr: []
            }, () => {
                this.getData(index)

            });

        } else if (index == 1) {
            this.setState({
                request: {
                    gold: 1,
                    currentPage: 1
                },
                arr: []
            }, () => {
                this.getData(index)
            });
        }


    }

    getData(index) {
        let params = {
            data: this.state.request,
            url: '/huoban-sales/http/sales/function/product/findGoldProductList.do',
            showLoading: this.state.firstComing,
        };
        API.request(params).then((res) => {
            let newArr = this.state.arr;
            newArr.push.apply(newArr, res.data.list);
            res.data.list && this.setState({
                arr: newArr,
                firstComing: false
            }, () => {
                this.initScroll(index)
            })

        });
    }

    initScroll(index) {
        if (!index) {
            let scroll = new Bscroll(this.refs.bannerNews1, {
                probeType: 1,
                click: true,
                scrollY: true
            });
        } else {
            let scroll = new Bscroll(this.refs.bannerNews2, {
                probeType: 1,
                click: true,
                scrollY: true
            });
        }

    }

    componentWillMount() {
        this.props.sendStatus()
    }

}

const mapDispatchToProps = dispatch => ({
    sendStatus: message => {
        dispatch({type: 'SHOW_HEAD'});
        dispatch({type: 'SHOW_FOOT'});
    },
});

export default connect(
    null,
    mapDispatchToProps
)(News)